<template>
  <div class="mr-root topiccountent">
    <div class="us">
      <img :src="use.avatar_url" alt="">
      <span class="username">{{use.loginname}}</span>
      <span> {{use.create_at | lasttime}}来到了这个社区</span>
    </div>
    <div class="topic">
        <p>创建的话题</p>
        <div v-for="(r,index) in use.recent_topics">
          <div>
            <span>{{r.title}}</span>
            <i>{{r.last_reply_at |lasttime}}</i>
          </div>
        </div>
    </div>
    <div class="topic">
        <p>参与的话题</p>
        <div v-for="(r,index) in use.recent_replies">
          <div>
            <span>{{r.title}}</span>
            <i>{{r.last_reply_at |lasttime}}</i>
          </div>
        </div>
    </div>
    <router-link to="/">
        <span @click="tui" class="bybe">退出</span>
    </router-link>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        use: {}
      }
    },
    props:['bol'],
    methods: {
      tui() {
        localStorage.removeItem('accesstoken');
        localStorage.removeItem('user');
        // this.bol = false
        // location.href ='/'
      }
    },
    created() {
      this.axios.get("http://www.vue-js.com/api/v1/user/"+localStorage.getItem('user') )
        .then(data => {
          // console.log(data.data.data)
          this.use = data.data.data
        //   console.log(localStorage.getItem('accesstoken'))
        })
        .catch(err => {
          console.log(err)
        })
    }
  }

</script>
<style scoped>
  .topiccountent{
    padding: 0 15px;
  }
  .us{
    text-align: center;
  }
  .us img{
    display: block;
    width: 2rem;
    margin: 10px auto;
    border-radius: 50%;
  }
  .bybe{
    display: block;
    width: 2rem;
    margin: 10px auto;
    font-size: .6rem;
    margin: 10px auto;
    text-align: center;
    background-color: green;
    color: white;
  }
  .username{
    display: inline-block;
    font-size: .6rem;
    font-weight: bold;
    margin: 10px 0;
  }
  p{
    font-size: .5rem;
    background-color: #f9f9f9;
    padding: 5px 10px;
    
  }
  .topic{
    margin: 10px 0;
    border: 1px solid #ccc;
  }
  .topic>div{
    padding: 10px 0;
    border-top: 1px solid #ccc;
  }
  .topic span{ 
    display: inline-block;
    width: 7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 20px;
    font-size: .4rem;
  }
  .topic i{
    font-style: normal;
    float: right;
    margin-right: 30px;
  }
</style>
